<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>《Flutter UI问题分析小结》 - Lucklyの博客 - 在阅读中遇见自己</title><meta name="Description" content="早起的年轻人做的网站"><meta property="og:title" content="《Flutter UI问题分析小结》" />
<meta property="og:description" content="
本文主要介绍
" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" />
<meta property="og:image" content="https://luckly.work/logo.png"/>
<meta property="article:published_time" content="2021-07-31T19:06:55+08:00" />
<meta property="article:modified_time" content="2021-07-31T19:06:55+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://luckly.work/logo.png"/>

<meta name="twitter:title" content="《Flutter UI问题分析小结》"/>
<meta name="twitter:description" content="
本文主要介绍
"/>
<meta name="application-name" content="LoveIt">
<meta name="apple-mobile-web-app-title" content="LoveIt"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" /><link rel="prev" href="https://luckly.work/flutter%E4%B8%8D%E8%A6%81%E6%8B%85%E5%BF%83%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E5%99%A8/" /><link rel="next" href="https://luckly.work/flutter-sample%E8%A7%A3%E6%9E%90/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "《Flutter UI问题分析小结》",
        "inLanguage": "zh-CN",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/luckly.work\/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/luckly.work\/images\/Apple-Devices-Preview.png",
                            "width":  3200 ,
                            "height":  2048 
                        }],"genre": "posts","keywords": "flutter","wordcount":  3169 ,
        "url": "https:\/\/luckly.work\/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93\/","datePublished": "2021-07-31T19:06:55+08:00","dateModified": "2021-07-31T19:06:55+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "xxxx","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/luckly.work\/images\/avatar.png",
                    "width":  528 ,
                    "height":  560 
                }},"author": {
                "@type": "Person",
                "name": "早起的年轻人"
            },"description": ""
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><div class="logo-wrapper">
  <a href="/%20/" class="logo">Lucklyの博客 - 在阅读中遇见自己</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
      <a class="menu-item-link" href="/posts/">所有文章</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/flutter/">Flutter</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/read/">读书笔记</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/go/">Go</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/tags/">标签</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/categories/">分类</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/about/">关于</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="https://github.com/ITmxs">Github</a>
    </li><li class="menu-item">
      <a class="menu-item-link" href="/friend/">友链</a>
    </li>
  </ul>
</nav><main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">目录</h2>
            <div class="toc-content" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">《Flutter UI问题分析小结》</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="/" title="Author" rel=" author" class="author"><i class="fas fa-user-circle fa-fw"></i>早起的年轻人</a></span>&nbsp;<span class="post-category">收录于 <a href="/categories/flutter/"><i class="far fa-folder fa-fw"></i>Flutter</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2021-07-31">2021-07-31</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 3169 字&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 7 分钟&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        data-srcset="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 1.5x, https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png 2x"
        data-sizes="auto"
        alt="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"
        title="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png" /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>目录</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#问题背景">问题背景</a>
      <ul>
        <li><a href="#需求描述">需求描述</a></li>
        <li><a href="#flutter-方案">Flutter 方案</a></li>
        <li><a href="#遇到的问题">遇到的问题</a></li>
      </ul>
    </li>
    <li><a href="#问题分析">问题分析</a>
      <ul>
        <li><a href="#视觉规范的差异">视觉规范的差异</a></li>
        <li><a href="#safearea-的误用">SafeArea 的误用</a>
          <ul>
            <li><a href="#ui-分析">UI 分析</a></li>
            <li><a href="#safearea-介绍">SafeArea 介绍</a></li>
            <li><a href="#问题小节">问题小节</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#总结">总结</a></li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><blockquote>
<p>本文主要介绍</p>
</blockquote>
<p>我们的 Flutter 项目中自定义 AppBar 时 SafeArea 误用导致出现一个奇怪的 UI 问题。本文从这个问题出发，简单梳理了 Android 和 iOS 平台在 AppBar 视觉规范上的差异，然后使用 Dart DevTools 分析并成功解决问题。</p>
<p>[TOC]</p>
<h1 id="问题背景">问题背景</h1>
<h2 id="需求描述">需求描述</h2>
<p>最近我们项目接入 Flutter 并重写一些简单页面。项目中很多 Native 页面的 AppBar (为简单起见，本文将 Android 的 ActionBar/Toolbar 以及 iOS 的 Navigation Bar 统称为 AppBar)有类似这样的交互效果，</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/ezgif1e54ad03a7341.gif"
        title="组队排行榜" /></p>
<p>Flutter 页面也需要实现这种交互。一种做法是 Flutter 页面中保留原有的 Native AppBar，在 Flutter 列表滚动时通过 <code>MethodChannel</code> 通知 Native AppBar 更新其背景。不妨称这个方案为 Native 方案。另外一种做法是隐藏原有 Native AppBar，直接在 Flutter 层实现相同交互。这个方案称为 Flutter 方案。</p>
<p>显然，Native 方案实现起来较为繁琐，且似乎偏离了 <code>MethodChannel</code> 的合理使用场景。而 Flutter 方案可以避免跟 Native 层不必要的通信，所以我们选择了该方案。</p>
<h2 id="flutter-方案">Flutter 方案</h2>
<p><a href="https://github.com/flutter/flutter/tree/master/examples/flutter_gallery/lib/demo/fortnightly" target="_blank" rel="noopener noreffer">FortnightlyDemo</a> (Flutter 官方 example)实现了自定义的 <code>ShortAppBar</code>：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725848702985.jpg"
        title="ShortAppBar -w396" /></p>
<p><code>ShortAppBar</code> 简化后的代码如下。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">class FortnightlyDemo extends StatelessWidget {
  static const String routeName = &#39;/fortnightly&#39;;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: &#39;Fortnightly Demo&#39;,
      theme: _fortnightlyTheme,
      home: Scaffold(
        body: Stack(
          children: &lt;Widget&gt;[ FruitPage(), SafeArea(child: ShortAppBar()),],
        ),
      ),
    );
  }
}

class ShortAppBar extends StatelessWidget {
  const ShortAppBar({ this.onBackPressed });

  final VoidCallback onBackPressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 56,
      ...
    );
  }
}
</code></pre></td></tr></table>
</div>
</div><p>注意这里一个细节，从视觉效果上来看这里的 <code>ShortAppBar</code> 并没有延伸到 Status Bar 下方，</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726104959036.jpg"
        title="ShortAppBar 没有延伸到 Status Bar 下方" /></p>
<p>参考 <code>ShortAppBar</code> 的代码并加上必要的交互，我很快就实现了 <code>CustomAppBar</code>。
而我们项目中要求 <code>CustomAppBar</code> 能延伸 Status Bar 下方。给 <code>SafeArea</code> 套上一个 <code>Container</code> 就可以实现这种效果。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Container(
  color: appBarColor,
  child: SafeArea(child: CustomAppBar())
)
</code></pre></td></tr></table>
</div>
</div><p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15726105059869.jpg"
        title="ShortAppBar 延伸到 Status Bar 下方" /></p>
<h2 id="遇到的问题">遇到的问题</h2>
<p><code>CustomAppBar</code> 在 Android 上的效果还不错，在 iPhone 7 上也能接受(高度偏大一点点)，但在 iPhone 11 上的实际效果显得很违和了：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        title="CustomAppBar 在 iPhone 11 上偏高 -w301" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725911634410.jpg"
        title="CustomAppBar 比原生应用的 AppBar 要高 -w331" /></p>
<p>如上图，<code>CustomAppBar</code> 在 iPhone 11 上比原生应用的 AppBar 严重偏高。</p>
<h1 id="问题分析">问题分析</h1>
<p>为什么 <code>CustomAppBar</code> 在 Android 机器上看起来很好，在 iOS (尤其是 iPhone 11)上却严重偏高？</p>
<p>Flutter 可以在 Android 平台和 iOS 平台上在像素级别无差别地进行绘制，这是它的强大之处。但不容忽视的是，Android 视觉规范天生跟 iOS 有差异，如果不考虑并尊重这些差异而强行无差别绘制，肯定会导致某一端看起来怪怪的。</p>
<p>所以很显然问题的一个原因是 <code>CustomAppBar</code> 的实现没有考虑平台差异。另一个原因则是 <code>SafeArea</code> 的误用导致 <code>CustomAppBar</code> 进一步偏高。接下来就这两个原因分别展开。</p>
<h2 id="视觉规范的差异">视觉规范的差异</h2>
<p>首先得承认 Android 和 iOS 视觉上天生存在某些不一致。 (这也是 Flutter 分别提供 material 和 cupertino 风格控件的原因)</p>
<p>根据 <a href="https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/" target="_blank" rel="noopener noreffer">iOS Navigation Bar 设计规范</a>，标准的 AppBar 高度是 44pt (不包括 Status Bar)。</p>
<p>根据 <a href="https://material.io/develop/android/" target="_blank" rel="noopener noreffer">Android Material Design 设计规范</a>，Status Bar 高度是 24dp，标准的 AppBar(Action Bar) 高度是 56dp。</p>
<p><a href="https://github.com/flutterchina/gitme" target="_blank" rel="noopener noreffer">Gitme</a> 是用 Flutter 实现的应用，不过它是 Material Design 风格的，在 iOS 上看起来是这样：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725930597849.jpg"
        title="Gitme -w359" /></p>
<p>总觉得哪里怪是不是？没错，这里的 AppBar 太高！</p>
<p>所以第一个改进就是根据当前系统为 <code>CustomAppBar</code> 选择合适的高度。修改后的示意代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">class CustomAppBar extends StatelessWidget {
  const CustomAppBar({ this.onBackPressed });

  final VoidCallback onBackPressed;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: isAndroid ? 56 : 44,
      ...
    );
  }
}
</code></pre></td></tr></table>
</div>
</div><hr>
<p>事实上，Flutter 分别为 material 和 cupertino 提供了符合各自设计规范的 <a href="https://flutter.dev/docs/catalog/samples/basic-app-bar" target="_blank" rel="noopener noreffer">AppBar</a> 和 <a href="https://api.flutter.dev/flutter/cupertino/CupertinoNavigationBar-class.html" target="_blank" rel="noopener noreffer">CupertinoNavigationBar</a>，以简化应用开发。</p>
<p>你可能会问，既然有了 AppBar 和 CupertinoNavigationBar，能不能这样处理？</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">class AnotherCustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (isAndroid) {
        return AppBar();
    } else if (isIOS) {
        return CupertinoNavigationBar();
    } else {
    }
  }
}
</code></pre></td></tr></table>
</div>
</div><p><code>AnotherCustomAppBar</code> 理论上更简单优雅，但实践发现有以下问题：</p>
<ul>
<li><code>AppBar</code> 的高度是 56dp，而我们Android端应用的规范是 50dp，所以需要调整 <code>AppBar</code> 高度</li>
<li><code>AppBar</code> 在 Android 端缺并不是沉浸式风格(status bar 和 AppBar 背景色不同)，所以需要对其进行适配</li>
<li><code>CupertinoNavigationBar</code> 背景色设置成透明仍然会遮挡背景图片 (why?)</li>
</ul>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730062923455.jpg"
        title="Android 上 status bar 有不同背景色 -w295" /></p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725942471237.jpg"
        title="iOS 上背景图被 AppBar 遮挡 -w770" /></p>
<p>再考虑到后期可能还会给自定义的 AppBar 添加更多功能，直接使用 Flutter SDK 提供的 <code>AppBar</code> 和 <code>CupertinoNavigationBar</code> 相对不可控，所以放弃了 <code>AnotherCustomAppBar</code> 方案。</p>
<hr>
<h2 id="safearea-的误用">SafeArea 的误用</h2>
<p>视觉规范差异能在一定程度解释 <code>CustomAppBar</code> 在 iOS 上高度过大的问题。但考虑到其实这个差异不太大 (56-44=12，应该只相差12个逻辑单位)，跟视觉上看到的高度偏差有所不符，所以仍然让人疑惑是否存在其他问题。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        title="AppBar 过高 -w301" /></p>
<p>肉眼感觉这里的 AppBar 怕不止 56pt 吧? 不过肉眼不靠谱，还是上工具实测。</p>
<h3 id="ui-分析">UI 分析</h3>
<p><a href="https://flutter.dev/docs/development/tools/devtools/overview" target="_blank" rel="noopener noreffer">DevTools</a> 是 Dart 和 Flutter 下的性能测试与 bug 调试的工具。它的功能包括：</p>
<ul>
<li>检查 Flutter UI 布局</li>
<li>检查 Flutter app 性能问题</li>
<li>源码调试</li>
<li>内存诊断</li>
</ul>
<p>我们这里重点关注检查 Flutter UI 布局的功能。用法如下：</p>
<p>第一步，通过 <code>flutter attach</code> 连上 App 后，从 IDE 打开 DevTools。VS Code 使用 ⇧⌘P 调出如下窗口然后选择 “Open DevTools”</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725956009978.jpg"
        title="Dart DevTools -w629" /></p>
<p>第二步，在打开的浏览器窗口中按以下步骤操作就可以检查目标 Widget。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725954425771.jpg"
        title="Select Widget Mode -w1421" /></p>
<p>我们感兴趣的 Widget 是 <code>CustomAppBar</code>。以下三张图从不同角度近距离观察它。</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/safeareacustomappbarisok.jpg"
        title="CustomAppBar 真实高度" /></p>
<p>图一，从图中可以看出 <code>CustomAppBar</code> 的高度其实没有问题，正是预期中的 44pt (<code>CustomAppBar</code> 高度由 <code>CustomAppBarSize</code> 限制)</p>
<hr>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725961591573.jpg"
        title="CustomAppBar 可见高度 -w1117" /></p>
<p>图二，从图中可以看出 <code>CustomAppBar</code> 的高度看似偏高很多。</p>
<ul>
<li>可以看到红色框中的 <code>SafeArea</code> 为 <code>CustomAppBar</code> 添加了一个不正常的 <code>Padding</code>，bottom padding 为 34</li>
<li><code>Padding</code> 本身是不可见的，所以通常不会有影响。不过 <code>SafeArea</code> 的父节点是一个可见的 <code>Container</code>，所以看起来 AppBar 偏高</li>
</ul>
<hr>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725963633326.jpg"
        title="CustomAppBar 高度受 padding 影响 -w1096" /></p>
<p>图三，图中的 <code>CustomAppBar</code> 的高度正常。</p>
<ul>
<li><code>SafeArea</code> 同样为 <code>CustomAppBar</code> 添加了 <code>Padding</code>。不过这一回，bottom padding 为0</li>
<li><code>SafeArea</code> 的父节点同样是一个可见的 <code>Container</code>，但由于 bottom padding 为0，所以看起来 AppBar 高度正常</li>
</ul>
<p>至此可以初步定位到问题跟 <code>SafeArea</code> 有关(我们使用 <code>SafeArea</code> 来适配刘海屏设备)。继续分析前先快速了解下 <a href="https://api.flutter.dev/flutter/widgets/SafeArea-class.html" target="_blank" rel="noopener noreffer">SafeArea</a>。如果你熟悉这个 Widget 建议直接略过下一节。</p>
<h3 id="safearea-介绍">SafeArea 介绍</h3>
<p>再来说说 SafeArea。iPhone X 首次使用刘海屏，并且屏幕的可显示区域也不再是方方正正的了。这就带来如下一个问题：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15730072986793.jpg"
        title="异形屏导致内容显示不全 -w345" /></p>
<p>所以也就有了 SafeArea。这个<a href="https://www.youtube.com/watch?v=lkF0TQJO0bA" target="_blank" rel="noopener noreffer">视频</a>简单生动地介绍了 <a href="https://api.flutter.dev/flutter/widgets/SafeArea-class.html" target="_blank" rel="noopener noreffer">SafeArea</a>。</p>
<p><code>SafeArea</code> 的代码很少，所以这里就直接贴上来了。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">/// A widget that insets its child by sufficient padding to avoid intrusions by
/// the operating system.
///
class SafeArea extends StatelessWidget {

  /// Whether to avoid system intrusions on the left.
  final bool left;

  /// Whether to avoid system intrusions at the top of the screen, typically the
  /// system status bar.
  final bool top;

  /// Whether to avoid system intrusions on the right.
  final bool right;

  /// Whether to avoid system intrusions on the bottom side of the screen.
  final bool bottom;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    assert(debugCheckHasMediaQuery(context));
    final MediaQueryData data = MediaQuery.of(context);
    EdgeInsets padding = data.padding;
    // Bottom padding has been consumed - i.e. by the keyboard
    if (data.padding.bottom == 0.0 &amp;&amp; data.viewInsets.bottom != 0.0 &amp;&amp; maintainBottomViewPadding)
      padding = padding.copyWith(bottom: data.viewPadding.bottom);

    return Padding(
      padding: EdgeInsets.only(
        left: math.max(left ? padding.left : 0.0, minimum.left),
        top: math.max(top ? padding.top : 0.0, minimum.top),
        right: math.max(right ? padding.right : 0.0, minimum.right),
        bottom: math.max(bottom ? padding.bottom : 0.0, minimum.bottom),
      ),
      child: MediaQuery.removePadding(
        context: context,
        removeLeft: left,
        removeTop: top,
        removeRight: right,
        removeBottom: bottom,
        child: child,
      ),
    );
  } 
}
</code></pre></td></tr></table>
</div>
</div><p>本质上来说，<code>SafeArea</code> 会主动为其 child 加上 <code>Padding</code> 以避免 UI 超出屏幕。</p>
<ul>
<li><code>SafeArea</code> 的四个属性 <code>left</code>,<code>top</code>,<code>right</code>, <code>bottom</code> 分别用于控制是否对 child 的各个边界做 safe 处理</li>
<li>需要特别注意的是，<strong>这四个属性默认是 <code>true</code></strong>。</li>
</ul>
<h3 id="问题小节">问题小节</h3>
<p>为了适配 iPhone X 等设备，我们会为 <code>CustomAppBar</code> 给添加 <code>SafeArea</code> 以避免内容显示不全。为了保证 <code>CustomAppBar</code> 能延伸到 Status Bar 下方，又在最外层加上了 <code>Container</code> 。适配代码如下：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Container(
  child: SafeArea(
    child: CustomAppBar())
)
</code></pre></td></tr></table>
</div>
</div><p><code>SafeArea</code> 底层调用 <code>MediaQuery.of</code> 来构建合理的 <code>Padding</code> 对象。一开始我并没有注意到 <code>MediaQuery.of(context).padding.bottom</code> 的返回值在不同机型上有区别。比如，由于是带圆角的屏幕，在 iPhone 11 上 <code>MediaQuery.of(context).padding.bottom</code> 返回值为 <code>34pt</code>。而在方形屏幕上该值为 <code>0pt</code>。见下图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725981523931.jpg"
        title="iPhone 11 上 padding.bottom 的返回值 -w908" /></p>
<p>另一方面，我没有注意到 <code>SafeArea.bottom</code> 值默认为 <code>true</code>。所以这里的 <code>padding.bottom</code> 返回的 <code>34pt</code> 被错误地用作 <code>CustomAppBar</code> 的 bottom padding，而最外层带红色背景的 <code>Container</code> 会让 <code>Padding</code> 占据的区域变得可见。</p>
<p>最终，各种因素的综合影响导致 <code>CustomAppBar</code> 高度看起来严重偏大，如下图：</p>
<p><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        data-srcset="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 1.5x, https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg 2x"
        data-sizes="auto"
        alt="https://blog-1251688504.cos.ap-shanghai.myqcloud.com/2019/11/06/15725908638519.jpg"
        title="CustomAppBar 偏高 -w301" /></p>
<p>找到原因后，对代码进行第二个改进：指定 <code>SafeArea.bottom</code> 为 <code>false</code>。至此，问题解决！</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">SafeArea(
  bottom: false,  
  child: CustomAppBar()
)
</code></pre></td></tr></table>
</div>
</div><hr>
<p><strong>补充</strong>：为什么 <code>CupertinoNavigationBar</code> 不会有高度问题，它是怎么处理的？</p>
<p>我翻了下源码，果然也是将 <code>bottom</code> 设置为 <code>false</code>。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// flutter/packages/flutter/lib/src/cupertino/nav_bar.dart
...
return SizedBox(
  height: _kNavBarPersistentHeight + MediaQuery.of(context).padding.top,
  child: SafeArea(
    bottom: false,
    child: paddedToolbar,
  ),
);
</code></pre></td></tr></table>
</div>
</div><p>这从另一个角度印证了前面的分析以及解决方法是正确的。</p>
<hr>
<h1 id="总结">总结</h1>
<p>本文记录了 Flutter 项目中自定义 AppBar 时遇到的一个 UI 问题。问题主要原因在于：</p>
<ul>
<li>Android 和 iOS 视觉规范的差异</li>
<li><code>SafeArea</code> 的误用</li>
</ul>
<p>先从讨论了Android 和 iOS 视觉规范的差异对 Flutter UI 开发可能存在的影响，并使用 <a href="https://flutter.dev/docs/development/tools/devtools/overview" target="_blank" rel="noopener noreffer">Dart DevTools</a> 对 <code>SafeArea</code> 误用问题进行分析。</p>
<p>再梳理了 <code>SafeArea</code> 的误用是如何影响 <code>CustomAppBar</code> 的高度的。</p>
<ul>
<li>首先，<code>SafeArea</code> 缺省的 <code>bottom</code> 为 <code>true</code></li>
<li>第二，iPhone 11 上 <code>MediaQuery.of(context).padding.bottom</code> 返回值为 <code>34pt</code></li>
<li>最后，<code>Container</code> 导致由 <code>SafeArea</code> 添加的 <code>Padding</code> 占据的区域可见</li>
</ul>
<p>基于上述分析对 <code>CustomAppBar</code> 的进行两处改进，</p>
<ul>
<li>
<p>根据当前系统为 <code>CustomAppBar</code> 选择合适的高度</p>
</li>
<li>
<p>确保正确使用</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">SafeArea
</code></pre></td></tr></table>
</div>
</div><p>，避免产生不正确的可见区域。记住这两点，</p>
<ul>
<li><code>SafeArea</code> 会为内层的 child 添加 <code>Padding</code></li>
<li><code>SafeArea</code> 外层的 <code>Container</code> 会导致 <code>Padding</code> 占据的区域可见</li>
</ul>
</li>
</ul>
<p>通过这两处改进，成功解决自定义 AppBar 高度过大的问题，完美适配 iPhone 11。</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>更新于 2021-07-31</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"></div>
            <div class="post-info-share">
                <span><a href="javascript:void(0);" title="分享到 Twitter" data-sharer="twitter" data-url="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" data-title="《Flutter UI问题分析小结》" data-hashtags="flutter"><i class="fab fa-twitter fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Facebook" data-sharer="facebook" data-url="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" data-hashtag="flutter"><i class="fab fa-facebook-square fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Hacker News" data-sharer="hackernews" data-url="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" data-title="《Flutter UI问题分析小结》"><i class="fab fa-hacker-news fa-fw"></i></a><a href="javascript:void(0);" title="分享到 Line" data-sharer="line" data-url="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" data-title="《Flutter UI问题分析小结》"><i data-svg-src="https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg"></i></a><a href="javascript:void(0);" title="分享到 微博" data-sharer="weibo" data-url="https://luckly.work/flutter-ui%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90%E5%B0%8F%E7%BB%93/" data-title="《Flutter UI问题分析小结》" data-image="https://luckly007.oss-cn-beijing.aliyuncs.com/img/90c6cc12-742e-4c9f-b318-b912f163b8d0.png"><i class="fab fa-weibo fa-fw"></i></a></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/tags/flutter/">flutter</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">返回</a></span>&nbsp;|&nbsp;<span><a href="/">主页</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/flutter%E4%B8%8D%E8%A6%81%E6%8B%85%E5%BF%83%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E5%99%A8/" class="prev" rel="prev" title="《Flutter不要担心垃圾回收器》"><i class="fas fa-angle-left fa-fw"></i>《Flutter不要担心垃圾回收器》</a>
            <a href="/flutter-sample%E8%A7%A3%E6%9E%90/" class="next" rel="next" title="《Flutter  Sample解析》">《Flutter  Sample解析》<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
</article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">由 <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.79.1">Hugo</a> 强力驱动 | 主题 - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2021</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/" target="_blank">早起的年轻人</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer></div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="回到顶部">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="查看评论">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookieconsent@3.1.1/build/cookieconsent.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":10},"comment":{},"cookieconsent":{"content":{"dismiss":"同意","link":"了解更多","message":"本网站使用 Cookies 来改善您的浏览体验."},"enable":true,"palette":{"button":{"background":"#f0f0f0"},"popup":{"background":"#1aa3ff"}},"theme":"edgeless"},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.zh-cn","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"没有找到结果","snippetLength":50,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
